<template>
  <el-drawer
    :visible="show"
    :size="width"
    :append-to-body="true"
    :title="title"
    @close="close"
  >
    <div class="content">
      <el-form
        ref="form"
        label-width="120px"
        label-position="top"
        :model="form"
        :rules="rules"
      >
        <el-form-item
          label="用户类型"
          prop="tag_ids"
        >
          <el-select
            v-model="form.tag_ids"
            placeholder="请选择"
            style="width: 100%;"
            multiple
            clearable
          >
            <el-option
              v-for="item in optionsList.tag_ids"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="企微主体"
          prop="corp_id"
        >
          <el-select
            v-model="form.corp_id"
            placeholder="请选择"
            style="width: 100%;"
            filterable
            remote
            clearable
            @change="remoteMethodpay"
          >
            <el-option
              v-for="item in optionsList.weComBody"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="customerType == 2"
          label="选择客服分组"
          prop="group_id"
        >
          <el-select
            v-model="form.group_id"
            :disabled="!form.corp_id"
            filterable
            style="width: 100%;"
            remote
            multiple
            :remote-method="onGetGroup"
            clearable
            :placeholder="!form.corp_id ? '请先选择企微主体' : '请输入关键词' "
          >
            <el-option
              v-for="item in optionsList.group_id"
              :key="item.value"
              :label="item.label"
              :value="item.value + ''"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-else
          label="客服号"
          prop="customer_id"
        >
          <el-select
            v-model="form.customer_id"
            :disabled="!form.corp_id"
            filterable
            style="width: 100%;"
            remote
            multiple
            clearable
            :placeholder="!form.corp_id ? '请先选择企微主体' : '请输入关键词' "
          >
            <el-option
              v-for="item in optionsList.lookcustomer_id"
              :key="item.value"
              :label="item.label"
              :value="item.value + ''"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="弹窗样式"
          prop="template_url"
        >
          <div class="templateList">
            <el-radio-group v-model="form.template_url">

              <!-- -->
              <el-radio
                v-for="(item, index) in optionsList.weComTemplateStyle"
                :key="index"
                size="medium"
                :class="form.template_url==item.url?'radioActive':''"
                style="margin-bottom:20px;"
                :label="item.url"
              >
                <el-image
                  :src="item.url"
                  fit="contain"
                ></el-image>
              </el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <span class="dialog-footer rowFlex">
      <el-button
        class="btn"
        @click="close"
      >取 消</el-button>
      <el-button
        class="btn"
        type="primary"
        :loading="loading"
        @click="submit"
      >确 定</el-button>
    </span>
  </el-drawer>
</template>

<script type="text/javascript">
import { douYinMiniAppPay } from '@/api/miniApp'
import { commonData } from '@/api/common'
export default {
  props: ['show', 'width', 'title', 'rowInfo', 'userInfo', 'customerType'],
  data() {
    return {
      form: {
        corp_id: '',
        customer_id: [],
        tag_ids: [],
        template_url: '',
        group_id: ''
      },
      optionsList: {
        weComBody: [],
        lookcustomer_id: [],
        tag_ids: [],
        weComTemplateStyle: [],
        group_id: []
      },
      loading: false,
      rules: {
        tag_ids: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
        corp_id: [{ required: true, message: '请选择企微主体', trigger: 'change' }],
        customer_id: [{ required: true, message: '请选择客服号', trigger: 'change' }],
        template_url: [{ required: true, message: '请选择弹窗样式', trigger: 'change' }],
        group_id: [{ required: true, message: '请选择客服分组', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    console.log(this.rowInfo, this.customerType)
    this.onGetweComTemplateStyle()
    this.ongetweComBody()
    this.onGetProductType()
    if (this.userInfo.tag_ids) {
      this.form = JSON.parse(JSON.stringify(this.userInfo))
      this.form.group_id = this.form.group_id ? this.form.group_id : []
      if (this.userInfo.corp_id) {
        this.remoteMethodpay()
      }
    }
  },
  methods: {
    async onGetGroup(query) {
      const res = await commonData({
        type: 'corpGroup',
        corp_id: this.form.corp_id,
        value: query
      })
      if (res.status_code === 1) {
        this.optionsList.group_id = res.data.data
      }
    },
    async onGetProductType() {
      const res = await commonData({
        type: 'drainageUserTypeMap'
      })
      if (res.status_code === 1) {
        this.optionsList.tag_ids = res.data.data
      }
    },
    // 支付 客服号下拉
    async remoteMethodpay(value) {
      if (value) {
        this.form.customer_id = ''
        this.form.group_id = []
      }
      const res = await commonData({
        type: 'corpUser',
        value: this.form.corp_id
      })
      if (res.status_code === 1) {
        this.optionsList.lookcustomer_id = res.data.data
      }
      this.onGetGroup('')
    },
    // 企微主体下拉
    async ongetweComBody() {
      const res = await commonData({
        type: 'weComBody',
        value: this.rowInfo.weixin_blongs_id
      })
      if (res.status_code === 1) {
        this.optionsList.weComBody = res.data.data
      }
    },
    // 模板下拉
    async onGetweComTemplateStyle() {
      const res = await commonData({
        type: 'weComTemplateStyle'
      })
      if (res.status_code === 1) {
        this.optionsList.weComTemplateStyle = res.data.data
      }
    },
    tagIDResult(value) {
      this.form.tag_ids = value
    },
    weComBody(value) {
      this.form.corp_id = value
    },
    close() {
      this.$emit('update:show', false)
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const { corp_id, customer_id, tag_ids, template_url, group_id } = this.form
          let customer_name = []
          if (this.customerType == 2) {
          } else {
            customer_id.map((item) => {
              this.optionsList.lookcustomer_id.map((items) => {
                if (item == items.value) {
                  customer_name.push(items.label)
                }
              })
            })
          }

          customer_name = customer_name.toString()
          console.log(customer_name, 'customer_name')
          const corp_name = this.optionsList.weComBody.find((item) => item.value == corp_id).label || ''
          const tag_ids_name = []
          const template = this.optionsList.weComTemplateStyle.find((item) => item.url === template_url)
          tag_ids.map((item) => {
            const name = this.optionsList.tag_ids.find((items) => items.value === item)
            if (name) {
              tag_ids_name.push(name.label)
            }
          })
          const item = {
            corp_id: corp_id,
            customer_id: customer_id,
            tag_ids: tag_ids,
            tag_ids_name: tag_ids_name,
            customer_name: customer_name,
            corp_name: corp_name,
            style: template.style,
            template_url: template_url,
            group_id: group_id
          }
          this.$emit('submit', item)
          this.close()
        }
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
.rowFlex {
  z-index: 1000;
}
.my-el-form {
  display: flex;
  align-items: center;
  margin-bottom: 18px;

  .my-el-form-label {
    padding-right: 12px;
    display: flex;
    justify-content: end;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
}
::v-deep.el-form {
  padding-bottom: 0;
}
.content {
  padding: 0 20px;
  padding-bottom: 70px;
  overflow-y: auto;
  ::v-deep .el-select__tags {
    max-width: 100% !important;
  }
  .minApp-name {
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 10px 0;
  }
  .msg {
    font-size: 12px;
    color: #999;
    padding: 10px 0;
  }
  .templateList {
    width: 100%;
    overflow-x: auto;
    display: flex;
    .radioActive {
      ::v-deep .el-radio__label {
        border: 2px solid #06c261;
      }
    }
  }
}
.copy-main {
  display: flex;
  align-items: center;
}
.checkBox {
  width: 100%;
  height: auto;
  background: #fdf6ec;
  border-radius: 4px;
  border: 1px solid #f2bc69;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #e6a23c;
  padding: 10px;
  // margin-bottom: 20px;
  margin-top: 8px;
}
::v-deep .el-form-item__label {
  font-weight: bolder;
}
::v-deep .el-dialog .el-dialog__footer {
  padding: 0 !important;
}
::v-deep.dialog-footer {
  display: flex;
  width: 100%;
}
::v-deep.el-radio-group {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  // margin-bottom: 100px;
  .el-radio {
    height: auto;
    width: 146px;
    margin: 0 7px;
    // padding: 10px 0;
    // flex: 1;
    .el-radio__label {
      flex: 1;
      margin-bottom: 10px;
      padding: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
::v-deep.el-radio {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  width: 150px;
  height: 220px;
  padding-bottom: 10px;
}
::v-deep.el-radio:last-child {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
}

::v-deep .el-drawer {
  height: 100%;
  overflow: auto;
}

.content {
  height: auto;
  padding: 20px;
  padding-bottom: 80px;
  ::v-deep .el-form-item__label {
    font-weight: 600;
  }
  ::v-deep .el-drawer__header {
    font-weight: 600;
  }
}
.titleSet {
  font-size: 16px;
  color: #333;
}
.question {
  color: #333333;
  font-weight: bolder;
  font-size: 16px;
  margin-left: 10px;
}

.dialog-footer {
  width: 100%;
  height: auto;
  position: absolute;
  right: 0px;
  bottom: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  justify-content: flex-end;
  background: #fff;
  .btn {
    width: 84px;
    height: 32px;
  }
}
</style>
